<template>
    <el-popover
        placement="bottom-end"
        width="300"
        trigger="manual"
        v-model="data.visible"
        popper-class="userlist_password_set">
        <el-form ref="formRef" :model="data.form" label-position="right" label-width="100px">
            <el-form-item label="是否提醒：" prop="onOff" :rules="$validate.validates({required:false,msg:'不能为空'})">
                <el-switch v-model="data.form.onOff"></el-switch>
            </el-form-item>

            <el-form-item v-if="data.form.onOff==1" label="提醒时间：" prop="day" :rules="[{required:true,message:'不能为空',trigger:'blur'}]">
                <el-input-number v-model="data.form.day" :controls="false" :min="30" :max="365" class="width-80" maxlength="3" placeholder="请输入30-365整数"></el-input-number>
                <span class="ml-[8px] label_name">天</span>
                <div v-if="data.show" style="color:#ff4949;font-size:12px;">请输入30-365整数</div>
            </el-form-item>
        </el-form>
        <div style="text-align: right; margin: 0">
            <el-button class="ed-button ed_white_bottom" @click="close">取消</el-button>
            <el-button class="ed-button ed_black-bottom" @click="save" :loading="data.loading">确定</el-button>
        </div>
        <el-button slot="reference" class="ed-button ed_white-bottom ed-button36" @click="updatePassword"><i class="el-icon-s-tools"></i> 修改密码设置</el-button>
    </el-popover>
</template>

<script setup>
import * as api from "../api"; 
import { onDeactivated, reactive, ref, defineExpose } from 'vue';
import message from 'src/utils/once-message'
    const data = reactive({
        visible: false,
        loading: false,
        form: {
            onOff: false,
            day: '30'
        },
        show: false
    })
    function updatePassword(){
        api.getPasswordSet().then(res=>{
            Object.assign(data.form, res)
            data.form.onOff = res.onOff==1?true:false
            data.visible = true
        }).catch((err)=>{
            message.error({
                message: err,
                duration: 2000,
                center: true
            })
        })
    }
    const formRef = ref()
    function save(){
        formRef.value.validate(valid=>{
            if (valid) {
                updatePasswordFuc()
            }
        })
    }
    function updatePasswordFuc(){
        data.loading = true
        api.updatePasswordSet({
            id: data.form.id,
            day: data.form.onOff ? data.form.day : undefined,
            onOff: data.form.onOff ? 1 : 0
        }).then(res=>{
            message.success({
                message: "操作成功",
                duration: 2000,
                center: true
            });
            close()
        }).catch((err)=>{
            message.error({
                message: err,
                duration: 2000,
                center: true
            })
            cancelLoading()
        })
    }
    function close(){
        data.loading = false
        data.visible = false
        data.show = false
        formRef.value.clearValidate()
    }
    function cancelLoading(){
        data.loading = false
    }
</script>

<style lang="scss">
    .userlist_password_set{
      padding-left: 13px;
  }
</style>
<style scoped>
    :deep(.el-popover__reference-wrapper){
        margin-right: 10px;
    }
</style>